<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>规则参数列表</title>

		<meta name="description" content="Static &amp; Dynamic Tables" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="/lib/ace/css/bootstrap.min.css" />
		<link rel="stylesheet" href="/lib/ace/font-awesome/4.5.0/css/font-awesome.min.css" />

		<!--easyui-->
		<link rel="stylesheet" href="/lib/easyui/themes/default/easyui.css" />
		<link rel="stylesheet" href="/lib/easyui/themes/icon.css" />

		<!-- page specific plugin styles -->

		<!-- text fonts -->
		<link rel="stylesheet" href="/lib/ace/css/fonts.googleapis.com.css" />

		<!-- ace styles -->
        <link rel="stylesheet" href="/lib/ace/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />

		<!--[if lte IE 9]>
			<link rel="stylesheet" href="/lib/ace/css/ace-part2.min.css" class="ace-main-stylesheet" />
		<![endif]-->
		<link rel="stylesheet" href="/lib/ace/css/ace-skins.min.css" />
		<link rel="stylesheet" href="/lib/ace/css/ace-rtl.min.css" />

		<!--[if lte IE 9]>
		  <link rel="stylesheet" href="/lib/ace/css/ace-ie.min.css" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->
		<script src="/lib/ace/js/ace-extra.min.js"></script>

		<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

		<!--[if lte IE 8]>
		<script src="/lib/ace/js/html5shiv.min.js"></script>
		<script src="/lib/ace/js/respond.min.js"></script>
		<![endif]-->

		<style type="text/css">
			.form-group .param{
				padding-left: 137px;
			}
		</style>
	</head>

	<body>

        <div class="container-fluid" style="margin: 50px 30px 0 30px; height: 800px" id="app">
            <div class="row">
                <div class="col-md-2">

					<h3 class="header blue lighter smaller">
						<!-- <i class="ace-icon fa fa-calendar-o smaller-90"></i> -->
						查看规格参数面板：
					</h3>
					<div class="space-3"></div>

					<div id="categoryTree" style="overflow: hidden">

					</div>
					
                </div>
                <div class="col-md-3">
					<h3 class="header blue lighter smaller">
						<!-- <i class="ace-icon fa fa-calendar-o smaller-90"></i> -->
						规格组：
					</h3>
					<div class="space-3"></div>

                    <table class="table  table-bordered table-hover">
						<thead>
							<tr>
								<th>序号</th>
								<th style="display: none">id</th>
								<th style="display: none">cid</th>
								<th>组名</th>
								<th>操作</th>
							</tr>
						</thead>

						<tbody>
							<tr v-for="(item ,i) in specGroup" :key="item.id">
								<td v-cloak>{{i + 1}}</td>
								<td style="display: none" v-cloak>{{item.id}}</td>
								<td style="display: none">{{item.cid}}</td>
								<td v-cloak><a style="text-decoration: none; cursor:pointer" @click="getSpecParam(i)">{{item.name}}</a></td>
								<td>
									<div class="hidden-sm hidden-xs btn-group">
										<button class="btn btn-xs btn-info" data-toggle="modal" data-target="#modifyGroupForm" :data="item.id" :name="item.name">
											<i class="ace-icon fa fa-pencil bigger-120"></i>
										</button>
									
										<button class="btn btn-xs btn-danger" @click="deleteGroup(i)">
											<i class="ace-icon fa fa-trash-o bigger-120"></i>
										</button>
									</div>
								</td>
							</tr>

						</tbody>
					</table>

					<div style="margin-bottom: 10px">
						<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addGroupForm">
							<i class="ace-icon fa fa-check bigger-120"></i>
							新增分组
						</button>
					</div>
                </div>

                <div class="col-md-7">
					<h3 class="header blue lighter smaller">
						<!-- <i class="ace-icon fa fa-calendar-o smaller-90"></i> -->
						具体规格参数：
					</h3>
					<div class="space-3"></div>

                    <table class="table  table-bordered table-hover">
						<thead>
							<tr>
								<th>序号</th>
								<th style="display: none">id</th>
								<th style="display: none">cid</th>
								<th style="display: none">group_id</th>
								<th>参数名</th>
								<th>是否为数值</th>
								<th>单位</th>
								<th>是否通用</th>
								<th>是否通用可搜索</th>
								<th>操作</th>
							</tr>
						</thead>

						<tbody>
							<tr v-for="(item ,i) in specParam" :key="item.id">
								<td v-cloak>{{i + 1}}</td>
								<td style="display: none" v-cloak>{{item.id}}</td>
								<td style="display: none" v-cloak>{{item.cid}}</td>
								<td style="display: none" v-cloak>{{item.group_id}}</td>
								<td v-cloak>{{item.name}}</td>
								<td v-cloak>{{item.numeric | numericFormat}}</td>
								<td v-cloak>{{item.unit | unitFormat}}</td>
								<td v-cloak>{{item.generic | genericFormat}}</td>
								<td v-cloak>{{item.searching | searchingFormat}}</td>
								<td>
									<div class="hidden-sm hidden-xs btn-group">
										<button class="btn btn-xs btn-info" data-toggle="modal" data-target="#modifyParamForm" :data="item.id" :name="item.name" :numeric="item.numeric"
										:unit="item.unit" :generic="item.generic" :searching="item.searching">
											<i class="ace-icon fa fa-pencil bigger-120"></i>
										</button>
									
										<button class="btn btn-xs btn-danger">
											<i class="ace-icon fa fa-trash-o bigger-120"></i>
										</button>
									</div>
								</td>
							</tr>

						</tbody>
					</table>

					<div style="margin-bottom: 10px">
						<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addParamForm">
							<i class="ace-icon fa fa-check bigger-120"></i>
							新增参数
						</button>
					</div>
                </div>
            </div>

			<!-- 添加Group表单 -->
			<div class="modal fade" id="addGroupForm" tabindex="-1" role="dialog" aria-labelledby="groupFormLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="addGroupFormLabel">添加分组</h4>
						</div>
						<div class="modal-body">

							<form class="form-horizontal" role="form">
								<div class="form-group">

									<label class="col-sm-4 control-label no-padding-right">
										<span style="color: red;">*</span>分组名称:
									</label>

									<div class="col-sm-8">
										<input type="text" id="addGroupName" name="name" required placeholder="请输入分组名称" class="col-xs-10 col-sm-5" />
									</div>
								</div>

							</form>

						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
							<button type="button" class="btn btn-primary" id="add_group_submit">立即提交</button>
						</div>
					</div>
				</div>
			</div>

			<!-- 修改Group表单 -->
			<div class="modal fade" id="modifyGroupForm" tabindex="-1" role="dialog" aria-labelledby="groupFormLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="modifyGroupFormLabel">添加分组</h4>
						</div>
						<div class="modal-body">

							<form class="form-horizontal" role="form">
								<div class="form-group">

									<label class="col-sm-4 control-label no-padding-right">
										<span style="color: red;">*</span>分组名称:
									</label>

									<div class="col-sm-8">
										<input type="text" id="modifyGroupName" name="name" required placeholder="请输入分组名称" class="col-xs-10 col-sm-5" />
									</div>
								</div>

							</form>

						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
							<button type="button" class="btn btn-primary" id="modify_group_submit">立即提交</button>
						</div>
					</div>
				</div>
			</div>

			<!-- 添加Param表单 -->
			<div class="modal fade" id="addParamForm" tabindex="-1" role="dialog" aria-labelledby="paramFormLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="addParamFormLabel">添加参数</h4>
						</div>
						<div class="modal-body">

							<form class="form-horizontal" role="form">
								<div class="form-group">

									<div class="col-sm-4 control-label no-padding-right">
										<span style="color: red;">*</span>参数名称:
									</div>

									<div class="col-sm-8">
										<input type="text" id="addParamName" name="name" required placeholder="请输入参数名称" class="col-xs-10 col-sm-5" />
									</div>
								</div>
								<div class="form-group">
									<div class="checkbox">
										<label class="param">
											<input name="form-common-checkbox" type="checkbox" class="ace" />
											<span class="lbl">是否为通用属性</span>
										</label>
									</div>
								</div>

								<div class="form-group">
									<div class="checkbox">
										<label class="param">
											<input name="form-num-checkbox" type="checkbox" class="ace" onclick="add_num(this)" />
											<span class="lbl">是否为数值类型</span>
										</label>
									</div>
								</div>

								<div class="form-group" style="display: none" id="add_num_input">

									<div class="param">
										数值单位:
									</div>
									<div class="space-10"></div>
									<div class="param">
										<input type="text" id="addNum" name="name" required placeholder="请输入数值单位" class="col-xs-10 col-sm-5" style="width: 240px" />
									</div>
								</div>

								<div class="form-group">
									<div class="checkbox">
										<label class="param">
											<input name="form-search-checkbox" type="checkbox" class="ace" onclick="add_search(this)" />
											<span class="lbl">是否用于搜索</span>
										</label>
									</div>
								</div>
								<div class="form-group" style="display: none" id="add_search_input">

									<div class="param">
										搜索区间:
									</div>

									<div class="space-10"></div>

									<div class="param">
										<input type="text" id="add_search_from" name="name" required placeholder="From" class="col-xs-10 col-sm-5" style="width: 120px" />
										<input type="text" id="add_search_to" name="name" required placeholder="To" class="col-xs-10 col-sm-5" style="width: 120px" />
									</div>
								</div>

							</form>

						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
							<button type="button" class="btn btn-primary" id="add_param_submit">立即提交</button>
						</div>
					</div>
				</div>
			</div>

			<!-- 修改Param表单 -->
			<div class="modal fade" id="modifyParamForm" tabindex="-1" role="dialog" aria-labelledby="paramFormLabel">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
							<h4 class="modal-title" id="modifyParamFormLabel">修改参数</h4>
						</div>
						<div class="modal-body">

							<form class="form-horizontal" role="form">
								<div class="form-group">

									<div class="col-sm-4 control-label no-padding-right">
										<span style="color: red;">*</span>参数名称:
									</div>

									<div class="col-sm-8">
										<input type="text" id="modifyParamName" name="name" required placeholder="请输入参数名称" class="col-xs-10 col-sm-5" />
									</div>
								</div>
								<div class="form-group">
									<div class="checkbox">
										<label class="param">
											<input name="form-common-checkbox" id="form-common-checkbox" type="checkbox" class="ace" />
											<span class="lbl">是否为通用属性</span>
										</label>
									</div>
								</div>

								<div class="form-group">
									<div class="checkbox">
										<label class="param">
											<input name="form-num-checkbox" id="form-num-checkbox" type="checkbox" class="ace" onclick="modify_num(this)" />
											<span class="lbl">是否为数值类型</span>
										</label>
									</div>
								</div>

								<div class="form-group" style="display: none" id="modify_num_form">

									<div class="param">
										数值单位:
									</div>
									<div class="space-10"></div>
									<div class="param">
										<input type="text" id="modifyNum" name="name" required placeholder="请输入数值单位" class="col-xs-10 col-sm-5" style="width: 240px" />
									</div>
								</div>

								<div class="form-group">
									<div class="checkbox">
										<label class="param">
											<input name="form-search-checkbox" id="form-search-checkbox" type="checkbox" class="ace" onclick="modify_search(this)" />
											<span class="lbl">是否用于搜索</span>
										</label>
									</div>
								</div>
								<div class="form-group" style="display: none" id="modify_search_form">

									<div class="param">
										搜索区间:
									</div>

									<div class="space-10"></div>

									<div class="param">
										<input type="text" id="modify_search_from" name="name" required placeholder="From" class="col-xs-10 col-sm-5" style="width: 120px" />
										<input type="text" id="modify_search_to" name="name" required placeholder="To" class="col-xs-10 col-sm-5" style="width: 120px" />
									</div>
								</div>

							</form>

						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
							<button type="button" class="btn btn-primary" id="modify_param_submit">立即提交</button>
						</div>
					</div>
				</div>
			</div>
        </div>


		<!-- basic scripts -->

		<!--[if !IE]> -->
		<script src="/lib/ace/js/jquery-2.1.4.min.js"></script>

		<!-- <![endif]-->

		<!--[if IE]>
            <script src="/lib/ace/js/jquery-1.11.3.min.js"></script>
        <![endif]-->

		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='/lib/ace/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
		<script src="lib/ace/js/bootstrap.min.js"></script>

		<!-- page specific plugin scripts -->
		<script src="/lib/ace/js/jquery.dataTables.min.js"></script>
		<script src="/lib/ace/js/jquery.dataTables.bootstrap.min.js"></script>
		<script src="/lib/ace/js/dataTables.buttons.min.js"></script>
		<script src="/lib/ace/js/buttons.flash.min.js"></script>
		<script src="/lib/ace/js/buttons.html5.min.js"></script>
		<script src="/lib/ace/js/buttons.print.min.js"></script>
		<script src="/lib/ace/js/buttons.colVis.min.js"></script>
		<script src="/lib/ace/js/dataTables.select.min.js"></script>

		<!-- ace scripts -->
		<script src="/lib/ace/js/ace-elements.min.js"></script>
        <script src="/lib/ace/js/ace.min.js"></script>

		<!--easyui-->
		<script src="/lib/easyui/jquery.easyui.min.js"></script>
		<script src="/lib/easyui/locale/easyui-lang-zh_CN.js"></script>

		<!--vue-->
		<script src="/lib/vue/vue.js"></script>

        <!-- 自己 js -->
        <script src="/js/spec.js"></script>
	</body>
</html>